<template>
  <div class="container">
      <div class="goods-list-item" v-for="(v,i) in arr" :key="i">
          <div class="goods-img">
              <img :src="v.goodsUrl" alt="">
          </div>
          <div class="goods-name">
              <span>{{v.goodsName}}</span>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[
                {
                    "goodsUrl":"https://res.vmallres.com/pimages/product/virtualCategory/kg/62994152244615149926.png",
                    "goodsName":"耳机音箱"
                },
                {
                    "goodsUrl":"https://res.vmallres.com/pimages/product/virtualCategory/56698896700619889665.png",
                    "goodsName":"真无线耳机"
                },{
                    "goodsUrl":"https://res.vmallres.com/pimages/product/virtualCategory/kg/62720432244613402726.png",
                    "goodsName":"有线耳机"
                },{
                    "goodsUrl":"https://res.vmallres.com/pimages/product/virtualCategory/46432996700619923464.png",
                    "goodsName":"蓝牙耳机"
                },{
                    "goodsUrl":"https://res.vmallres.com/pimages/product/virtualCategory/kg/29862952244615926892.png",
                    "goodsName":"配件"
                },{
                    "goodsUrl":"https://res.vmallres.com/pimages/product/virtualCategory/kg/13240001545610004231.png",
                    "goodsName":"耳机套"
                },{
                    "goodsUrl":"https://res.vmallres.com/pimages/product/virtualCategory/WWOSSil2oU617h6J7ih9.png",
                    "goodsName":"保护套"
                },{
                    "goodsUrl":"https://res.vmallres.com/pimages/product/virtualCategory/kg/32144432244613444123.png",
                    "goodsName":"智能眼镜"
                },
            ]
        }
    }
}
</script>

<style scoped lang="scss">
    .container{
        width: 100%;
        height: 0.82rem;
        background-color: #f5f5f5;
        font-size: 0.16rem;
        display: flex;
        overflow: auto;
        padding-bottom: 0.08rem;
        padding-top: 0.08rem;
        .goods-list-item{
            padding-left: 0.08rem;
            width: 0.58rem;
            height: 0.78rem;
            padding-top: 0.02rem;
            padding-bottom: 0.02rem;
            margin-right: 0.08rem;
            .goods-img{
                width: 0.58rem;
                height: 0.58rem;
                background-color: white;
                border-radius: 0.1rem;
                overflow: hidden;
                img{
                    display: block;
                    width: 0.44rem;
                    height: 0.44rem;
                    margin:0 auto;
                    margin-top: 0.07rem;
                }
            }
            .goods-name{
                width: 0.56rem;
                height: 0.18rem;
                font-size: 0.12rem;
                margin-top: 0.03rem;
                span{
                    display: block;
                    text-align: center;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }
</style>